<template>
	<view class="header sticky-box" style="--element-top: 0; z-index: 99">
		<view class="nav" :style="[getNavStyle]">
			<view :style="{ height: menuButtonHeight + 'px' }" class="flex-c-s">
				<u-search @change="(e) => emits('search', e)" shape="square" :showAction="false" placeholder="请输入学生姓名-记得导出数据"></u-search>
				<u-icon @click="emits('reload')" style="margin-left: 20px" color="white" size="26" name="reload"></u-icon>
			</view>
		</view>
		<!-- <view class="u-notice-bar">
			<u-notice-bar @click="clickNotice" :color="$main_color" :text="get_notice_list" mode="link" bgColor="white"></u-notice-bar>
		</view> -->
	</view>
</template>
<script setup>
import { computed, ref } from 'vue';
defineProps([]);
const get_notice_list = ref('记得保存数据');
const emits = defineEmits(['search', 'reload']);
// 解除样式隔离
defineOptions({
	options: { styleIsolation: 'shared' }
});

const { paddingRight, menuButtonHeight, height, paddingTop } = uni.$navStyle();
const getNavStyle = computed(() => {
	return {
		height: height + 'px',
		paddingTop: paddingTop + 'px'
	};
});
</script>
<style scoped lang="scss">
.u-notice-bar {
	width: 720rpx;
	margin: 0 auto;
	padding-bottom: 20rpx;
}
.header {
	width: 750rpx;
	background-color: $bg_color;
}

.news {
	right: 0;
	position: absolute;
	top: 0;
	width: 14rpx;
	height: 14rpx;
	background-color: red;
	border-radius: 50%;
}
.nav {
	padding: 0 20rpx;
	box-sizing: content-box;
}
:deep(.u-swiper__indicator) {
	right: 16rpx;
}
:deep(.u-swiper-indicator__wrapper__dot) {
	width: 12rpx;
	height: 12rpx;
}
</style>
